<template>
  <div>
    <div class="title">
      {{courseName}}
    </div>
    <div class="subTitle">
      {{testPaperName}}
    </div>
    <div class="content">
      <div style="" v-for="item in question" :key="item.id">
        <div>{{item.questionId}}.{{item.questionName}}<span style="color:green">{{item.rightAnswer}}</span></div>
        <div class="selStyle" v-for="item2 in item.questionOption" :key="item2.id">
          {{item2}}
        </div>
      </div>
      
    </div>
    <div class="footer">
      <el-button @click="back()">返回</el-button>
    </div>
  </div>
</template>

<script>
import { getPreview } from "@/api/system/user";
export default {
  components: {
   
  },
  data() {
    return {
      testPaperName: '',
      courseName: '',
      question: [],
    }
  },
  created() {
    this.preview(this.$route.query.id)
  },
  mounted(){
    
  },
  methods: {
    back() {
      this.$router.push('examination')
    },
    preview(id) {
      getPreview(id).then(res => {
        if (res.code == 200) {
          this.testPaperName = res.data.testPaperInfo.testPaperName
          this.courseName = res.data.testPaperInfo.courseName
          this.question = res.data.question
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    }
  }
}
</script>
<style scoped>
  .title {
    text-align: center;
    font-size: 26px;
    padding: 20px 0;
  }
  .subTitle {
    text-align: center;
    font-size: 18px;
    padding-bottom: 10px;
  }
  .content {
    width: 1200px;
    margin: 0 auto;
  }
  .selStyle {
    line-height: 40px;
    margin-left: 16px;
  }
  .footer {
    text-align: center;
  }
</style>
